<template>
  <p-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <p-spin :spinning="confirmLoading">
      <p-form :form="form">
        <p-row>
		  <p-col  :span="12">
			<p-form-item label="模板编码" :labelCol="labelCol" :wrapperCol="wrapperCol"> 
				<p-input  v-decorator="[ 'templateCode']" placeholder="请输入模板编码"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="12">
			<p-form-item label="模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input  v-decorator="[ 'templateName']" placeholder="请输入模板名称"></p-input>
			</p-form-item>
		  </p-col>
        </p-row>
         <p-row>
		  <p-col  :span="12">
			<p-form-item label="车间" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input   v-decorator="[ 'workroomname']" placeholder="天线车间"></p-input>
			</p-form-item>
		  </p-col>
		  <p-col  :span="12">
			<p-form-item label="二级工序" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input  v-decorator="[ 'processTwoname']" placeholder="请输入二级工序"></p-input>
			</p-form-item>
		  </p-col>
       </p-row>
       <p-row>
          <p-col  :span="24">
            <p-form-item >
              <Listdata :datalist='datalist'></Listdata>
            </p-form-item>
          </p-col>
        </p-row>
         <p-row>
          <p-col :span="15">
              <p-form-item label="对接方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <p-radio-group name="radioGroup">
                  <p-radio :value="1">接口对接</p-radio>
                  <p-radio :value="2">数据库对接</p-radio>
                  <p-radio :value="3">中间表对接</p-radio>
                </p-radio-group>
              </p-form-item>
          </p-col>
         <p-col  :span="9">
          <p-form-item label="对接系统" :labelCol="labelCol" :wrapperCol="wrapperCol1"> 
            <p-input  v-decorator="[ 'system']"></p-input>
          </p-form-item>
          </p-col>
        </p-row>
       
      </p-form>
    </p-spin>
  </p-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import { SubmitOnchangMixin } from '@/mixins/SubmitOnchangMixin'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import fPopupMes from '@/components/fPopupMes/fPopupMes'
  import Listdata from './Listdata'
  export default {
    name: "Dataeditor",
    mixins: [SubmitOnchangMixin],
    components: {
      JDictSelectTag,
      fPopupMes,
      Listdata
    },
    data () {
      return {
        form: this.$form.createForm(this),
        title: '操作',
        width: 800,
        visible: false,
        datalist:[],
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        wrapperCol1:{
          xs: { span: 24 },
          sm: { span: 19 },
        },
        confirmLoading: false,
        validatorRules: {
          process2No: {rules: [
            {required: true, message: '请输入二级工序编码!'},
          ]},
          process2Name: {rules: [
            {required: true, message: '请输入二级工序名称!'},
          ]},
          process2Explain: {rules: [
            {required: true, message: '请输入二级工序描述!'},
          ]},
          labelTemplateNo: {rules: [
            {required: true, message: '请输入标签模板编码!'},
          ]},
          labelTemplateName: {rules: [
            {required: true, message: '请输入标签模板名称!'},
          ]},
          status: {rules: [
            {required: true, message: '请输入状态!'},
          ]},
          remark: {rules: [
          ]},
        },
        url: {
          add: '/mes-manufacture/mfDataCollection',
          edit: '/mes-manufacture/mfDataCollection',
          pro1No: '/mes-craft/craft/mesPeDefinition/search/tree',
          pro2No: '/mes-craft/craft/mesPeDefinition/child',
          datalist:'/basic-business/sys/dict/queryDictItemByCodeAndValue'//字典查询
        },
        tableColumns:[
            {
              title: '标签模板编号',
              align: 'center',
              dataIndex: 'labelTemplateNo'
            },
            {
              title: '标签模板名称',
              align: 'center',
              dataIndex: 'labelTemplateName'
            },
            {
              title: '标签模板描述',
              align: 'center',
              dataIndex: 'labelTemplateDescrtion',
            },
            {
              title: '标签模板尺寸',
              align: 'center',
              dataIndex: 'labelTemplateLength',
            },
            {
              title: '标签类型',
              align: 'center',
              dataIndex: 'labelType',
            },
            {
              title: '责任部门',
              align: 'center',
              dataIndex: 'dptname',
            },
            {
              title: '标签纸颜色',
              align: 'center',
              dataIndex: 'labelColor',
            },
            {
              title: '碳带型号',
              align: 'center',
              dataIndex: 'ribbonsType',
            },
            {
              title: '打印机型号',
              align: 'center',
              dataIndex: 'printerType',
            },
            {
              title: '是否包含流水号',
              align: 'center',
              dataIndex: 'containSn',
            }
        ],
        treeData:[]
      }
    },
    mounted () {
      // this.loadData()
    },
    methods: {
      add () {
        this.edit({});
        this.getRuleCodeValue()
      },
      //获得采集模板表数据
       getRuleCodeValue() {
        let param = {
          dictCode:'MES_DATA_COLLECTION_CONTENT_TEST'
        }

        getAction(this.url.datalist, param).then(res => {
          // 执行成功，获取返回的值，并赋到页面上
          if (res.success) {
            const item = res.data;
            this.datalist=item
          }
        })
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'templateCode','templateName','processTwoname','templatesAddParamList'))
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
              that.confirmLoading = true;
              let httpurl = '';
              let method = '';
              let formData = Object.assign(this.model, values);
              this.formData = Object.assign(this.model, values);
              //新增触发
              if(!this.model.id){
                httpurl+=this.url.add;
                method = 'post';
                if(this.EnhanceJS.afterAdd){
                  //新增之前
                  let Obj = eval(this.EnhanceJS.afterAdd)
                  new Obj(this)
                }else{
                  console.log("表单提交数据",formData)
                  that.modalFrom(httpurl,formData,method)
                }
              }else{
                //编辑触发
                httpurl+=this.url.edit;
                method = 'put';
                if(this.EnhanceJS.afterEdit){
                 //编辑之前
                  let Obj = eval(this.EnhanceJS.afterEdit)
                  new Obj(this)
                }else{
                  console.log("表单提交数据",formData)
                  that.modalFrom(httpurl,formData,method)
                }
              }
          }

        })
      },
      selectNode(value, node, extra){
        console.log(value, node, extra)
      },
      loadData(arg) {
        if(!this.url.pro1No){
          this.$message.error("请设置url.pro2No属性!")
          return
        }
        getAction(this.url.pro1No, {}).then((res) => {
          if (res.success) {
            res.data.forEach(item =>{
              const obj={
                id: item.id,
                title: item.processmname,
                value:item.processmcode,
                isLeaf:!item.hasChild,
                disabled:true
              }
              this.treeData.push(obj)
            })
          }
          if(res.code===510){
            this.$message.warning(res.msg)
          }
        })
      },
      onLoadData(node) {
        return new Promise(resolve => {
            getAction(this.url.pro2No, { pid: node.dataRef.id }).then((res) => {
              if (res.success) {
                node.dataRef.children=[]
                res.data.forEach(item =>{
                  const obj={
                    id: item.id,
                    title: item.processmname,
                    value: item.processmcode,
                    processsprc:item.processmcode,
                    isLeaf: true
                  }
                  node.dataRef.children.push(obj)
                })
                this.treeData = [...this.treeData]
              }
              if(res.code===510){
                this.$message.warning(res.msg)
              }
            })
            resolve();
        });
      },
      handleCancel () {
        this.close()
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'process2No','process2Name','process2Explain','labelTemplateNo','labelTemplateName','status','remark','createBy','createTime','updateBy','updateTime'))
      },


    }
  }
</script>